<template>
  <div style="padding-top: 20px">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="按日期查找">
        <el-date-picker v-model="ruleForm.start" type="date" placeholder="日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="按内容查找">
        <el-input placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="danger" @click="Release">新增</el-button>
        <el-button type="success" @click="MyRelease">我的</el-button>
        <el-button type="success" @click="AllRelease">所有</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="recruitId"
        label="计划书编号"
        width="50"
      />
      <el-table-column
        prop="status"
        label="审核状态"
        width="100"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            disable-transitions
          >{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="recruitName"
        label="计划书标题"
        width="120"
      />
      <el-table-column
        prop="applyDepatment"
        label="部门"
        width="120"
      />
      <el-table-column
        prop="recruitPeopleNum"
        label="招聘人数"
        width="120"
      />
      <el-table-column
        prop="releaseTime"
        label="发布日期"
        width="300"
      />
      <el-table-column
        prop="userName"
        label="发布人"
        width="120"
      />
      <el-table-column
        prop="recruitStart"
        label="开始日期"
        width="120"
      />
      <el-table-column
        prop="recruitEnd"
        label="结束日期"
        width="120"
      />
      <el-table-column
        prop="recruitRequirements"
        label="招聘要求"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="发布招聘计划书" :visible.sync="dialogTableVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="计划书标题" prop="name">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="招聘人数" required>
          <el-input-number v-model="ruleForm.num" controls-position="right" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="招聘时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="ruleForm.start" type="date" placeholder="开始日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker v-model="ruleForm.end" type="date" placeholder="结束日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="申请部门" required>
          <el-select v-model="ruleForm.department" placeholder="教务处/二级学院">
            <el-option
              v-for="item in departmentList"
              :key="item.collegeId"
              :label="item.collegeName"
              :value="item.collegeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="职位要求" prop="desc">
          <el-input v-model="ruleForm.requirements" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { releasePlan } from '../../api/Artisan'
import { getAllDepartment } from '../../api/Artisan'
import { getAllRecruit } from '../../api/Artisan'
import { getReleaseRecruitByUserId } from '../../api/Artisan'
export default {
  data() {
    return {
      dialogTableVisible: false,
      edit: false,
      del: false,
      num: 1, // 招聘人数
      userId: '', // 技术人员账号
      departmentList: [],
      page: 1,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],

      ruleForm: {
        title: '',
        num: '',
        start: '',
        end: '',
        department: '',
        requirements: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        start: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        end: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        department: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        requirements: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.listRecruit()
    this.listDepartment()
  },

  methods: {
    onSubmit() {
      console.log('submit!')
    },
    /**
             * 发布招聘计划书
             * @constructor
             */
    Release() {
      this.dialogTableVisible = true
    },
    /**
             * 发布
             */
    submitForm() {
      const params = new URLSearchParams()
      // params: {"title":title,"num":num,"start":start,"end":end,"department":department,"requirements":requirements}
      params.append('title', this.ruleForm.title)
      params.append('num', this.ruleForm.num)
      params.append('start', this.ruleForm.start)
      params.append('end', this.ruleForm.end)
      params.append('department', this.ruleForm.department)
      params.append('requirements', this.ruleForm.requirements)
      releasePlan(params).then(res => {
        this.dialogTableVisible = false
        this.listRecruit()
      }).catch(err => {
        this.$message.error('发布异常' + err)
      })
    },
    /**
             * 查询所有部门
             */
    listDepartment() {
      getAllDepartment().then(res => {
        this.departmentList = res.data
      }).catch(err => {
        this.$message.error('查询异常' + err)
      })
    },

    /**
             * 查询所有招聘计划书
             */
    listRecruit() {
      getAllRecruit(this.page).then(res => {
        this.tableData = res.data
      }).catch(err => {
        this.$message.error('查询异常' + err)
      })
    },

    /**
             * 技术人员发布的招聘计划书
             */
    MyRelease() {
      getReleaseRecruitByUserId().then(res => {
        this.tableData = res.data
      })
    },

    /**
             * 所有发布
             * @constructor
             */
    AllRelease() {
      this.listRecruit()
    }
  }
}
</script>

<style scoped>

</style>
